<template>
    <div class="drag-container">
        <el-row :gutter="50">
            <el-col :span="12">
                <div
                        :class="['target', {'is-drag-entered': isDragEntered}]"
                        :ondragover="onTargetDragover"
                        :ondragenter="onTargetDragenter"
                        :ondragleave="onTargetDragLeave"
                        :ondrop="handleDrop"
                >
                    <div class="source-item"
                         v-for="item in targetArray" :key="item">
                        <span>item-{{item}}</span>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="source">
                    <div class="source-item"
                         :data="item"
                         :ondragstart="dragstart"
                         :ondragend="dragend"
                         draggable="true"
                         v-for="item in sourceArray" :key="item">
                        <span>item-{{item}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script setup lang="ts">
    import {ref} from "vue";

    const isDragEntered = ref(false)

    const sourceArray = ref<Array<number>>([1,2,3,4,5,6])
    const targetArray = ref<Array<number>>([])

    /**
     * Drag Item
     */
    function dragstart(event){
        let data = (event.target as HTMLElement).getAttribute('data') as string
        event.dataTransfer.dropEffect = 'move'
        event.dataTransfer.setData('text/plain', data)
        console.log('item-drag-start:' ,event)
    }
    function dragend(event){
        console.log('item-drag-end')
    }

    function handleDrop(event){
        isDragEntered.value = false

        event.preventDefault()
        const originalData = Number(event.dataTransfer.getData("text/plain"))

        // 数据变化
        targetArray.value.push(originalData)
        sourceArray.value = sourceArray.value.filter(item => item !== originalData)

        console.log('--- on drop:', originalData)
    }



    /**
     * Drag Target
     */
    function onTargetDragover(event){
        event.preventDefault()
        // console.log('drag-over: ', event)
    }
    function onTargetDragenter(event){
        console.log('drag-enter: ')
        isDragEntered.value = true
    }

    function onTargetDragLeave(event){
        console.log('drag-enter: ',)
        isDragEntered.value = false
    }




</script>

<style scoped lang="scss">
    .drag-container{
        padding: 30px;
    }
    .source, .target{
        padding: 20px;
        height: 400px;
        display: flex;
        flex-flow: row wrap;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        border: 2px solid #007AFF;
        background-color: white;
    &:hover{
         border-style: dashed;
     }
    .source-item{
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;

        text-transform: uppercase;
        height: 60px;
        width: 100px;
        margin-bottom: 5px;
        margin-right: 5px;
        padding: 10px;
        text-align: center;
        border: 2px solid black;
    &:hover{
         background-color: #4CD964;
         cursor: pointer;
         user-select: none;
     }
    }
    }

    .source{

    }
    .target{
        border-color: #4CD964;
    &.is-drag-entered{
         background-color: #4CD964;
     }

    }
</style>

